<template>
  <div class="echarts" ref="chartDom"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';
const chartDom = ref()
let myChart:any = null;
const props = defineProps({
  option:Object,
})
//重绘图表函数
const resizeHandler = () => {
  myChart.resize();
}
//页面成功渲染，开始绘制图表
onMounted(() => {
  myChart = echarts.init(chartDom.value);
  myChart.setOption(props.option, true);
  window.addEventListener('resize', resizeHandler);
})

//页面销毁前，销毁事件和实例
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler);
  myChart.dispose()
})
//监听图表数据时候变化，重新渲染图表
watch(() => props.option, () => {
  myChart.setOption(props.option, true);
}, { deep: true })

defineExpose({
  resizeHandler
});


</script>

<style scoped>
.echarts{
  height: 100%;
  width: 100%;
}
</style>